<template>
	<view class="content" v-show="display">
		<view class="hader">
			<!-- add高度组件 -->
			<view class="img_box">
				<view class="img_box">
					<u-swiper :list="list1" :indicator='true' keyName="image" indicatorMode='dot' :height='600'
						@click="hadeswp"></u-swiper>
				</view>
				<view></view>
				<view class="user">
					<view class="user_head_portrait" @tap="routergo('/pages/me_all/personage/personage')">
						<image :src="userall.avatar" mode=""></image>
					</view>
					<view class="user_2" @tap="routergo('/pages/me_all/personage/personage')">
						<view class="user_2_1">
							{{userall.username||'请登录'}} Lv{{userall.level||0}}
						</view>
						<view class="user_2_2">
							积分:{{userall.score||0}}
						</view>
						<view class="user_2_3">
							<u-line-progress :percentage="userall.score/userall.upgrade*100" activeColor="#05B6F6"
								:showText="false"></u-line-progress>
						</view>
					</view>
					<view class="user_3" @tap="routergo('/pages/me_all/codeqr/codeqr')">
						<view class="user_code">
							<image src="@/static/Project_drawing 23.png" mode=""></image>
						</view>
						<text>会员码</text>
					</view>
				</view>
			</view>
			<height :hg='30'></height>
			<view class="card">
				<view class="card_1 flexw">
					<view class="card_1_left" @tap="router(1)" v-if="common.iszq==1">
						<view class="card_1_left_title">
							<view>自取</view>
							<view>下单免排队</view>
						</view>
						<view class="card_1_left_img">
							<image src="@/static/Project_drawing 28.png" mode=""></image>
						</view>
					</view>

					<view class="card_1_right" @tap="router(2)" v-if="common.iswm==1">
						<view class="card_1_left_title">
							<view>外卖</view>
							<view>美食送到家</view>
						</view>
						<view class="card_1_left_img">
							<image src="@/static/Project_drawing 29.png" mode=""></image>
						</view>
					</view>

					<view class="card_1_right" @tap="routerTo('/pages/reserved/reserved')" v-if="common.isyy==1"
						style="margin-top: 16rpx;background-color: #ECECFA;">
						<view class="card_1_left_title">
							<view>提前预约</view>
							<view>提前预约，到店直接就餐</view>
						</view>
						<view class="card_1_left_img_1">
							<image src="@/static/yueY.png" mode=""></image>
						</view>
					</view>


					<view class="">
						<view class="card_2_left" v-if="common.ispayh==1"
							:style="{height:common.ists!=='1'?'348rpx':'162rpx'}"
							style="margin-top: 16rpx;background-color: #DAF3EF;" @tap="scanCode(2)">
							<view :class="common.ists!=='1'?'card_2_left_title_2':'card_2_left_title'">
								<view>扫码点餐(餐后支付)</view>
								<view>扫码点餐,饭后付款</view>
							</view>
							<view :class="common.ists!=='1'?'card_2_left_img_2':'card_2_left_img'">
								<image src="@/static/dinanC.png" mode=""></image>
							</view>
						</view>

						<view class="card_2_left" :style="{height:common.ispayh!=='1'?'348rpx':'162rpx'}"
							style="margin-top: 16rpx;background-color: #E1F2FA;" @tap="scanCode(1)"
							v-if="common.ists==1">
							<view :class="common.ispayh!=='1'?'card_2_left_title_2':'card_2_left_title'">
								<view>扫码点餐</view>
								<view>扫码座号二维码即可点餐</view>
							</view>
							<view :class="common.ispayh!=='1'?'card_2_left_img_2':'card_2_left_img'">
								<image src="@/static/saoma_bg.png" mode=""></image>
							</view>
						</view>
					</view>

				</view>
				<view class="card_2">
					<button open-type="contact" @contact="contact">
						<view class="card_2_content">
							<view class="card_2_content_left">
								<view>加盟咨询</view>
								<view>{{public.tel}}</view>
							</view>
							<view class="card_2_content_right">
								<image src="../../static/Project_drawing 3.svg" mode=""></image>
							</view>
						</view>
					</button>
					<view class="card_2_content" @tap="routerTo('/pages/me_all/integral/integral')">
						<view class="card_2_content_left">
							<view>积分商城</view>
							<view>礼券宝物全都有</view>
						</view>
						<view class="card_2_content_right">
							<image src="../../static/Project_drawing 4.svg" mode=""></image>
						</view>
					</view>

				</view>
				<view class="card_3">
					<u-swiper :list="list2" keyName="image" :indicator='true' indicatorMode='dot' :height='314'
						@click="swp"></u-swiper>
				</view>
				<view class="beianhao" v-if="common.mini_filings">
					备案号：{{common.mini_filings || ''}}
				</view>
			</view>

			<login :show="enter" @loadpage="loadpage" @closepage='closepage'></login>
		</view>
		<height :hg='40'></height>
		<barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE"
			scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>
	</view>
</template>
<script>
	import {
		userInfo,
		common
	} from "@/api/public.js"
	import {
		index_list,
		store_default,
		order_empty,
		seat
	} from "@/api/comm.js"
	import {
		assign,
		forEach
	} from "lodash"
	import route from 'uview-ui/libs/util/route'
	export default {
		data() {
			return {
				title: 'Hello',
				// 轮播图
				list1: [],
				list2: [],
				userall: {},
				public: {},
				display: false,
				enter: false,
				common: uni.getStorageSync('public') || ''
			}
		},
		onLoad(e) {
			if (e.pid) {
				uni.setStorageSync('pid', e.pid)
			}
			if (e.scene) {
				let bb = e.scene.split('&')
				let cc = bb[1]
				//2先餐后付款 //1先付款后餐
				uni.setStorageSync('firstPay', cc)
				uni.setStorageSync('option', 3)
				uni.setStorageSync('scene', bb[0])
			}

			// 获取公共参数
			this.index_listApi_1()
			this.index_listApi_2()
		},
		onShow() {
			// this.userInfoApi()
			this.enter = false
			this.commonApi()
			this.getUser()
		},
		methods: {
			loadpage() {
				this.unloadpage()
			},
			async getUser() {
				let token = uni.getStorageSync('userinfo').token
				if (token) {
					let user = await userInfo()
					if (user.code == 1) {
						uni.setStorageSync('user', user.data)
					}
				}
			},
			scanCode(e) {
				uni.scanCode({
					success: (res) => {
						if (res.path) {
							let option = uni.getStorageSync('option')
							if (option !== 3) {
								order_empty()
							}
							uni.setStorageSync('option', 3)
							uni.setStorageSync('tableNumber', false)
							uni.reLaunch({
								url: res.path
							})
						} else {
							uni.showToast({
								title: "座号二维码有误，请重新扫一扫！",
								icon: 'none'
							})
						}
						// 识别成功，执行对应操作
					}
				})
			},
			commonApi() {
				common().then(data => {
					if (data.code == 1) {
						uni.setStorageSync('public', data.data)
						this.common = data.data
						this.public = Object.assign({}, uni.getStorageSync('public'))
						if (!uni.getStorageSync('user')) {
							uni.setStorageSync('user', data.data)
						}
						this.userall = Object.assign({}, uni.getStorageSync('user'))
						this.display = true
					}
				})

			},
			async router(url) {
				let token = uni.getStorageSync('userinfo')
				if (token) {
					let shop = uni.getStorageSync('shop')
					let idx = uni.getStorageSync('option')
					let data = await store_default({
						id: shop || ''
					})
					if (data.code == 1) {
						if (url == 2) {
							if (data.data.takeaway_switch == 0) {
								uni.showToast({
									title: '该店铺暂不支持外卖',
									icon: "none"
								})
								return
							}
						} else {
							if (data.data.delivery_switch == 0) {
								uni.showToast({
									title: '该店铺暂不支持自提',
									icon: "none"
								})
								return
							}
						}
					}
					if (idx !== url) {
						order_empty()
					}
					uni.setStorageSync('tableNumber', false)
					uni.setStorageSync('option', url)
					uni.reLaunch({
						url: '/pages/order/order'
					})
				} else {
					this.enter = true
				}

			},
			swp(url) {
				uni.reLaunch({
					url: this.list2[url].url
				})
			},
			hadeswp(url) {
				uni.reLaunch({
					url: this.list1[url].url
				})
			},
			contact(e) {},
			async index_listApi_1() {
				let data = await index_list({
					type: 1
				})
				this.list1 = []
				this.list1.push(...data.data)
			},
			async index_listApi_2() {
				let data = await index_list({
					type: 2
				})
				this.list2 = []
				this.list2.push(...data.data)
			},

			routergo(url) {
				if (!uni.getStorageSync('userinfo')) {
					this.enter = true
					// uni.showToast({
					// 	title: '请登录',
					// 	icon: 'none'
					// })
					return
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			//未登录关闭弹出层需要关掉组件
			closepage() {
				this.enter = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.beianhao {
		margin: 20px 0;
		text-align: center;
		font-size: 24rpx;
		color: #b5b5b5;
	}

	.img_box {
		width: 100%;
		height: 692rpx;

		::v-deep .u-swiper__indicator {
			position: absolute;
			bottom: 150rpx !important;
		}

		.img_box {
			position: absolute;
		}

		.user {
			width: 704rpx;
			height: 177rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			margin: 0 auto;
			position: relative;
			top: 500rpx;

			.user_head_portrait {
				width: 111rpx;
				height: 111rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-left: 32rpx;
			}

			.user_2 {
				margin-left: 30rpx;

				.user_2_1 {
					width: 200px;
					font-size: 32rpx;
					font-weight: 600;
					color: #313539;
					margin-bottom: 5rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.user_2_2 {
					font-size: 24rpx;
					font-weight: 600;
					color: #2F2F2F;
					margin-bottom: 5rpx;
				}

				.user_2_3 {
					margin-top: 10rpx;
				}
			}

			.user_3 {
				position: absolute;
				right: 30rpx;

				.user_code {
					width: 54rpx;
					height: 54rpx;
					margin: 0 auto;
				}

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #2F2F2F;
				}
			}

		}
	}

	.card {
		width: 704rpx;
		margin: 0 auto;

		.card_1 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.card_2_left {
				width: 345rpx;
				border-radius: 16rpx 16rpx;
				padding: 24rpx;
				box-sizing: border-box;
				color: #3D3D3D;
				position: relative;

				.card_2_left_title {
					view:nth-child(1) {
						font-size: 24rpx;
						font-weight: 600;
						// color: #000000;
					}

					view:nth-child(2) {
						font-size: 20rpx;
						font-weight: 400;
						margin-top: 10rpx;
						z-index: 10;
					}
				}

				.card_2_left_img {
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					z-index: 0;

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}


				.card_2_left_title_2 {
					margin: 28rpx 0 0;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
						color: #000000;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #666;
						margin-top: 20rpx;
						width: 150rpx;
						position: relative;
						z-index: 10;
					}
				}

				.card_2_left_img_2 {
					width: 100%;
					height: 100%;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 0;
				}

			}

			.card_1_left {
				width: 345rpx;
				height: 348rpx;
				background: #FEFAEE;
				border-radius: 16rpx;
				position: relative;

				.card_1_left_title {
					margin: 50rpx 0 0 20rpx;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
						// color: #000000;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #666;
						margin-top: 20rpx;
					}
				}

				.card_1_left_img {
					width: 85%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
				}
			}

			.card_1_right {
				width: 345rpx;
				height: 348rpx;
				background: #FFF9F9;
				border-radius: 16rpx;
				position: relative;

				.card_1_left_title {
					margin: 50rpx 0 0 20rpx;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #666;
						margin-top: 20rpx;
						width: 190rpx;

					}
				}

				.card_1_left_img {
					width: 100%;
					height: 100%;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				.card_1_left_img_1 {
					width: 60%;
					height: 60%;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}

		}

		.card_2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;

			.card_2_content {
				width: 342rpx;
				height: 161rpx;
				background: #FFFFFF;
				border-radius: 36rpx 13rpx 13rpx 13rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.card_2_content_left {
					margin-left: 29rpx;
					text-align: left;

					view:nth-child(1) {
						font-size: 32rpx;
						font-weight: 500;
						color: #000000;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #AAAAAA;
						margin-top: 5rpx;
					}
				}

				.card_2_content_right {
					margin-right: 30rpx;
					width: 85rpx;
					height: 66rpx;
				}
			}
		}

		.card_3 {
			width: 100%;

		}
	}
</style>